<template>
  <el-card shadow="hover">
    <!-- 按钮 -->
    <template #header>
      <el-button type="primary" size="large" @click="showAdd">+ 添加</el-button>
    </template>
    <!-- 表格 -->
    <el-table v-loading="loading" row-key="id" :data="trademarkList" border stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="tmName" label="品牌名称" />
      <el-table-column label="品牌LOGO">
        <!-- 插入图片 -->
        <template #default="scope">
          <img :src="scope.row.logoUrl"   width="100" height="60" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 插入按钮 -->
        <template #default="{ row, $index }">
          <el-button size="small" type="warning" :icon="Edit" title="修改" @click="showUpdate(row)">修改</el-button>
          <el-button size="small" type="danger" :icon="Delete" title="删除" @click="removeTrademark(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
   
      <el-pagination
        v-model:currentPage="current"
        v-model:page-size="pageSize"
        :page-sizes="[3, 6, 9]"
        background
        layout=" prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @size-change="(val) => getTrademarkList(1, val)"
        @current-change="(val) => getTrademarkList(val, pageSize)"
        style="text-align: center; margin-top: 20px"
      />
    <!-- 对话框 -->
    <el-dialog draggable v-model="dialogFormVisible" :title="`${trademark.id ? '修改品牌' : '添加品牌'}`">
      <!--品牌名称和品牌的LOGO都应该在el-form表单中-->
      <el-form :model="trademark" ref="formRef" :rules="rules" style="width: 80%" label-width="100px">
        <!--品牌的名称-->
        <el-form-item label="品牌名称" prop="tmName">
          <el-input v-model="trademark.tmName" autocomplete="off" />
        </el-form-item>
        <!--品牌的LOGO-->
        <el-form-item label="品牌LOGO" prop="logoUrl">
          <!--上传图片的组件的使用-->
          <el-upload
            class="avatar-uploader"
            :action="`${BASE_URL}/admin/product/fileUpload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <!--上传的加载效果-->
            <el-icon v-if="uploadLoading" class="avatar-uploader-icon">
              <Loading />
            </el-icon>
            <!--上传的图片-->
            <img v-else-if="trademark.logoUrl" :src="trademark.logoUrl" class="avatar" />
            <!--上传的时候显示的加号:+-->
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
            <template #tip>
              <div class="el-upload__tip">只能上传jpg/png文件，且不超过50kb</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <!--取消和确定按钮-->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addOrUpdate">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script lang="ts">
export default {
  name: "App",
};
</script>
<script lang="ts" setup>
import { Plus, Loading, Edit, Delete } from "@element-plus/icons-vue";
// 引入所用到的接口类型
import type { TrademarkModel, TrademarkListModel } from "@/api/product/model/trademarkModel";
// 引入接口函数
import { addOrUpdateTrademark, deleteTrademarkByIdApi, getTrademarkListApi } from "@/api/product/trademark";
import { ref, reactive, onMounted,nextTick } from "vue";
// 消息的弹框
import { ElMessage, ElMessageBox } from "element-plus";
// 引入上传图片时候所用到的类型
import type {UploadProps} from "element-plus"
// 引入表单DOM对象的类型el-from组件的类型和验证规则的类型
import type {FormInstance,FormRules} from 'element-plus';
// 页码
const current = ref<number>(1);
// 页数
const pageSize = ref<number>(3);
// 总条数
const total = ref<number>(0);
// 加载效果的标识
const loading = ref<boolean>(false);
// 用来存储form表单DOM对象的
const formRef = ref<FormInstance>();
// 定义一个数组用来存储数据
const trademarkList = ref<TrademarkListModel>([]);
// 定义上传图片的根路径地址
const BASE_URL = import.meta.env.VITE_API_URL;
// 定义一个标识,用来存储品牌列表数据
const dialogFormVisible = ref(false);
// 定义一个加载效果的标识
const uploadLoading = ref<boolean>(false);

// 定义品牌对象
const trademark = reactive<TrademarkModel>({
  tmName: "", //品牌名字
  logUrl: "", //品牌的图片地址
});
// 添加按钮的方法
const showAdd = () => {
  trademark.id = undefined;
  trademark.tmName = "";  //清空品牌名称
  trademark.logUrl = "";  //清空品牌LOGO
  dialogFormVisible.value = true;

  // 重置表单验证的验证
  nextTick(() => {
    formRef.value?.resetFields()
  })
};
// 组件加载后的生命周期钩子
onMounted(() => {
  getTrademarkList();
});
// 获取品牌列表数据的方法
const getTrademarkList = async (page: number = current.value, limit: number = pageSize.value) => {
  // 开启加载效果
  loading.value = true;
  // 调用接口获取品牌列表数据
  const result = await getTrademarkListApi(page, limit);
  // 关闭加载的效果
  loading.value = false;
  // 重新保存页码也每页的条数
  current.value = page;
  pageSize.value = limit;
  // 更新总条数数据
  total.value = result.total;
  console.log(result);
  //更新品牌列表数据
  trademarkList.value = result.records;
  // 通过消息提示框展示结果信息
  ElMessage.success("获取品牌分类列表数据成功");
};
// 修改按钮的方法
const showUpdate = (row: TrademarkModel) => {
  // 拷贝数据
  Object.assign(trademark,row);
  // 显示对话框
  dialogFormVisible.value = true
};
// 上传图片的钩子和限制相关的方法
const handleAvatarSuccess: UploadProps["onSuccess"] = (res, file) => {
  // 储存上传成功的图片地址
  trademark.logUrl = res.data;
  // 隐藏加载效果
  uploadLoading.value = false;
  // 表单的验证
  formRef.value.validateField("logoUrl")
};
//上传图片限制
const beforeAvatarUpload : UploadProps["beforeUpload"] = (file) => {
  // 限制图片的类型
  const  isJpgOrPng = ["image/jpeg","image/png"].includes(file.type)
  // 限制图片的大小
  const isLt50k = file.size / 1024 < 50;
  if(!isJpgOrPng) {
    ElMessage.error("上传jpg或者是png")
    return false
  }
  if(!isLt50k) {
    ElMessage.error("上传图片不能大于50k");
    return false
  }
  // 显示加载效果
  uploadLoading.value = true;
  return true
};
// 自定义验证规则的方法
const validateTmName = (rule:any,value:any,callback:any) => {
  if (value.length < 2 || value.length > 10) {
    callback("品牌名字在2到10之间")
  }else{
    callback()
  }
};
// 表单的验证规则
const rules = reactive<FormRules>({
  tmName: [
    // 验证品牌名字
    { required: true, message: "必须要输入品牌名称" },
    { validator: validateTmName, trigger: "blur" },
  ],
  logoUrl: [
    // 验证品牌LOGO
    {
      required: true,
      message: "必须要上传一个图片",
    },
  ],
});
// 添加和修改操作的方法
const addOrUpdate = () => {
  formRef.value.validate(async (valid, fields) => {
    if (!valid) {
      return;
    }
    // 验证通过了
    try {
      // 调用接口.实现添加或者修改
      await addOrUpdateTrademark(trademark);
      // 提示信息
      ElMessage.success("操作成功");
      // 关闭对话框
      dialogFormVisible.value = false;
      // 刷新
      getTrademarkList(trademark.id ? current.value : 1);
    } catch (error) {
      console.log(error); // 不准
    }
  });
};
// 删除操作的方法
const removeTrademark = (row:TrademarkModel) => {
  ElMessageBox.confirm(`确定删除${row.tmName}吗`,"提示",{
    confirmButtonText:"确定",
    cancelButtonText: "取消",
    type:"warning"
  })
  .then(async() => {
    await deleteTrademarkByIdApi(row.id);
    ElMessage.success("操作成功")
    // 如果只剩一条数据，而且是在大于1的页码中删除数据
    if(trademarkList.length === 1 &&  current.value > 1 ) {
      current.value -= 1;
    }
    getTrademarkList()
  })
  .catch((error: any) => {
    ElMessage.error(error)
  });
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
